<template>
  <div>
    <div class="banner">
        <img
            class="banner-img"
            src="https://imgs.qunarzz.com/sight/p0/2109/c2/c235e4df01cf47fda3.img.png_710x360_a03b5f62.png"
        >
        <div class="banner-info">
            <div class="banner-title">
                大连圣亚海洋世界(AAAA景区)
            </div>
            <div class="banner-number">
                <span class="iconfont search-icon">&#xe63c;</span>
                39
            </div>
        </div>
    </div>
    <common-gallary></common-gallary>
  </div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary.vue'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallary
  }
}
</script>

<style lang="stylus" scope>
.banner
 position: relative
 overflow: hidden
 height: 0
 padding-bottom: 55%
 .banner-img
  width: 100%
 .banner-info
  display: flex
  position: absolute
  left: 0
  right: 0
  bottom: .3rem
  line-height: .6rem
  color: #fff
  .banner-title
    flex: 1
    font-size: .32rem
    padding: 0 .2rem
  .banner-number
    margin-top: .05rem
    padding: 0 .4rem
    line-height: .4rem
    height: .4rem
    border-radius: .2rem
</style>
